<template>
  <div>
    <el-row class="home">
      <el-col :span="16">
        <el-carousel :interval="4000" type="card" height="300px" indicator-position="none">
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <img :src="item.image" :alt="item.title">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <!-- loading -->
      <el-col :span="8" class="right" v-loading="isLoading">
        <div>
          <img :src="imageUrl.url" alt="" class="images">
          <span class="time">{{imageUrl.createdAt}}</span>
          <span class="MZ">妹子图{{imageUrl.title}}</span>
          <span class="randomGirl">randomGirl</span>
          <a href="javascript:;" @click="GetRandom">
            <svg t="1625985627787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="2428" width="25" height="25">
              <path
                d="M935.005091 459.752727a34.909091 34.909091 0 1 1 49.361454 49.361455l-78.382545 78.382545a34.816 34.816 0 0 1-49.338182 0l-78.405818-78.382545a34.909091 34.909091 0 1 1 49.361455-49.361455l14.801454 14.824728C818.525091 311.738182 678.330182 186.181818 508.928 186.181818c-130.466909 0-250.484364 76.706909-305.710545 195.397818a34.932364 34.932364 0 0 1-63.301819-29.463272C206.522182 208.896 351.418182 116.363636 508.904727 116.363636c210.152727 0 383.534545 159.953455 404.992 364.474182l21.085091-21.085091z m-73.960727 189.021091a34.932364 34.932364 0 0 1 16.965818 46.382546C811.310545 838.353455 666.461091 930.909091 508.951273 930.909091c-210.106182 0-383.534545-159.953455-404.968728-364.497455l-21.108363 21.108364a34.909091 34.909091 0 1 1-49.384727-49.361455l78.42909-78.42909a34.909091 34.909091 0 0 1 49.338182 0l78.382546 78.42909a34.909091 34.909091 0 1 1-49.338182 49.338182l-14.824727-14.801454C199.354182 735.534545 339.549091 861.090909 508.951273 861.090909c130.490182 0 250.507636-76.706909 305.710545-195.397818a34.909091 34.909091 0 0 1 46.382546-16.919273z"
                fill="#ffffff" p-id="2429"></path>
            </svg>
          </a>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="(item, index) in list" :key="index">
        <el-card class="card" :body-style="{ padding: '20px' }">
          <div class="img-wrapper">
            <img :src="item.images[0]" class="image">
          </div>
          <div style="padding: 14px;">
            <div class="title">{{ item.title }}</div>
            <div class="bottom clearfix">
              <time class="time">{{ item.createdAt }}</time>
              <router-link :to="{ name: 'Article', params: { id: item._id } }">
                <el-button type="text" class="button">详情</el-button>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="Btn">
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" @click="decList">上一页</el-button>
        <el-button type="primary" @click="addList">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {
    mapState,
    mapActions
  } from 'vuex';
  export default {
    name: "Home",
    data() {
      return {
        // banners: [],
        list: [],
        page: 1,
        imageUrl: {},
        isLoading: true
      }
    },
    computed: {
      ...mapState(['banners'])
    },
    created() {
      this.getList()
      this.GetBanner()
      this.GetRandom()
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgb(214 195 195 / 30%)'
      })
      axios({
        url: `https://gank.io/api/v2/data/category/All/type/All/page/${this.page}/count/12`
      }).then(res => {
        this.list = res.data.data
        console.log(res)
      }).finally(() => {
        loading.close()
      })
    },
    methods: {
      ...mapActions(['GetBanner']),
      // GetBanner() {
      //   axios({
      //     url: 'https://gank.io/api/v2/banners'
      //   }).then(res => {
      //     console.log(res)
      //     this.banners = res.data.data
      //   })
      // },
      getList() {
        axios({
          url: `https://gank.io/api/v2/data/category/All/type/All/page/${this.page}/count/12`
        }).then(res => {
          this.list = res.data.data
          console.log(res)
        })
      },
      GetRandom() {
        // loading
        this.isLoading = true
        axios({
          url: "https://gank.io/api/v2/random/category/Girl/type/Girl/count/1"
        }).then(res => {
          const {
            data
          } = res.data
          this.imageUrl = data[0]
          console.log(res);
        }).catch(() => {
          this.$message.error('内部错误，请刷新重试');
        }).finally(() => {
          // loading
          this.isLoading = false
        })
      },
      decList() {
        if (this.page > 1) {
          this.page -= 1
          this.getList()
        }
      },
      addList() {
        this.page += 1
        this.getList()
      },
    }
  };
</script>

<style lang="stylus">
  .el-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .card {
    .img-wrapper {
      background: url(../assets/logo.png) no-repeat center / 100px;
      height: 200px;
      overflow: hidden;
    }

    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    .title {
      height: 50px;
      line-height: 25px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }

  .Btn {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .el-row {
    margin: 40px 0;
  }

  .right {
    .images {
      margin-left: 40px;
      width: 80%;
      height: 300px;
      object-fit: cover;
    }

    .time {
      position: absolute;
      top: 20px;
      right: 200px;
      font-weight: 600;
      color: #fff;
    }

    .MZ {
      position: absolute;
      bottom: 104px;
      right: 245px;
      color: #fff;
    }

    .randomGirl {
      position: absolute;
      bottom: 20px;
      right: 267px;
      background-color: #6363f3;
    }

    a {
      position: absolute;
      bottom: 20px;
      right: 70px;
    }
  }
</style>